﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Admin.Master" Inherits="System.Web.Mvc.ViewPage<MvcEngineModelItem<PageContentViewModel>>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <title>
        <%= this. Model.Localize("DesignPageTitle")%>
    </title>
    <% Html.RenderCssFile("Template.css"); %>
    <% Html.RenderScriptTag("jquery.jeditable.mini.js"); %>
    
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <%= Html.SuccessNotification("successNotification", Model.Localize("PageContentSuccessNotification"))%>
    <%= Html.ErrorNotification("errorNotification", Model.Localize("PageContentErrorNotification"))%>
    <%= Html.SuccessNotification("successModuleInstallationNotification", Model.Localize("SuccessModuleInstallationNotification"))%>
    <%= Html.ErrorNotification("errorModuleInstallationNotification", Model.Localize("ErrorModuleInstallationNotification"))%>
    <div class="page-title" id="design-page-header">
         <h1><%= Model.Localize("DesignPageHeader")%></h1>
    </div>
     <div class="page-menu">
        <%= Html.UrlActionLink(Model.Localize("BackLink"), Url.Pages())%> |
        <%= Html.UrlActionLink(Model.Localize("SaveLink"), "javascript:void(0);", "Save(false);return false;")%> |
        <%= Html.UrlActionLink(Model.Localize("SaveAndCloseLink"), "javascript:void(0);", "Save(true);return false;")%> |
        <%= Html.UrlActionLink(Model.Localize("ViewLink"), Url.Page(Model.Item.Page.Id), new { target = "_blank" })%> |        
        <%= Html.UrlActionLink(Model.Localize("EditLink"), Url.EditPage(Model.Item.Page.Id))%>
        
    </div>
     <div id="markup-widget" class="widget markup">
       <h3><%= Model.Localize("PageMarkupWidgetTitle") %></h3>
       <% Html.RenderPartial("BackOfficeMarkup", Model.Item.Page); %>
    </div>
    
    <div id="design-mode-widget" class="widget">
        <h3><%= Model.Localize("ModeWidgetTitle") %></h3>
        <div id="design-widget-content">
            <strong>
                <% = Html.RadioButton("viewMode", "true", Model.Item.Mode == "View", new { onclick = "window.location='" + Url.PageTemplate(Model.Item.Page.Id, "View") + "'" }) %>
              <label for="annsyes"><%= Model.Localize("ViewModeLabel")%></label>
              <% = Html.RadioButton("designMode", "false", Model.Item.Mode == "Design", new { onclick = "window.location='" + Url.PageTemplate(Model.Item.Page.Id, "Design") + "'" })%>
              <label for="annsno"><%= Model.Localize("DesignModeLabel")%></label>
           </strong>
       </div>
   </div>
   <div id="modules-widget" class="widget">
       <h3><%= Model.Localize("ModulesWidgetTitle") %></h3>
       <div id="modules-widget-content">
           <div id="controls-container">
               <% if (Model.Item.Modules.Any())
                  {
                      var controlList = new SelectList(Model.Item.Modules, "Id", "Name");
                      %>
                        <%= Html.ListBox("moduleId", controlList)%>
               <%}
                  else
                  { %>
                        <%= Model.Localize("NoModuleLabel") %>
               <% } %>
           </div>
           <div>
                <button type="button" onclick="InstallModule();return false;">Install</button>
           </div>
        </div>
    </div>
    <div id="controls-widget" class="widget">
       <h3><%= Model.Localize("ControlsWidgetTitle") %></h3>
       <div id="controls-widget-content">
           <% using(Html.BeginForm(Url.AddControlToPage(Model.Item.Page.Id))){ %>
           <% if (Model.Item.Controls.Any())
              { 
                  var controlList = new SelectList(Model.Item.Controls, "Id", "Name");
                  %>
               <div id="control-list">
                    <%= Html.ListBox("controlId", controlList) %>
               </div>
           <%} %>
           <% if (Model.Item.Containers.Any())
              { 
                  var containers = new SelectList(Model.Item.Containers, "Id", "MarkupId");
                  %>
                  <div id="container-list">
                    <%= Html.ListBox("containerId", containers)%>
                  </div>
           <%} %>
           <div class="clear">
                <input type="submit" value="Add" />
            </div>
           <% } %>
      </div>
    </div>
    
    <div id="dialog" title="<%= Model.Localize("ModuleInstallationTitle") %>">
         <% using (Html.BeginForm(Url.AddModuleToPage(Model.Item.Page.Id, "Install"), new { id = "installModuleForm" }))
         { %> 
          
        <%} %>
        <%= Html.MvcEngineAntiForgeryToken(m => m.AntiForgeryToken) %>
     </div>
   
    <script type="text/javascript">

        $(".click").editable(function(value, settings) {
            var divId = $(this)[0].id;
            var id = divId.substr(5, divId.length - 1);
            var submitUrl = '<%=Url.RenamePageContent()%>/' + id;
            
            $.ajax({
                    url: submitUrl,
                    type: "POST",
                    dataType: "json",            
                    data: { name : value, ctrId : id },
                    dataType: "json",
                    success: function(data, textStatus) 
                    {
               
                    }
            });
            return (value);
        }, {
            tooltip: "Click to edit...",
            style: "inherit",
            width: 100
        });
    
        function InstallModule() {
            var moduleId = $('#moduleId').val();
            if (moduleId != null) {
                $.post('<%=Url.AddModuleToPage(Model.Item.Page.Id, "Install")%>/' + moduleId, null, function (data) {
                    $('#installModuleForm').html("");
                    $('#installModuleForm').load(data);
                    $('#dialog').dialog('open');
                }, "text");
            }
            else {
                jAlert('No module selected.', 'Information');
             }
        }

        $("#dialog").dialog({
            autoOpen: false,
            bgiframe: true,
            resizable: true,
            width: 400,
            modal: true,
            overlay: {
                backgroundColor: '#000',
                opacity: 0.5
            },
            buttons: {
                'Cancel': function () {
                    $(this).dialog('close');
                },
                'Install': function () {
                    var moduleId = $('#moduleId').val();

                    $(this).dialog('close');

                    $.post('<%=Url.AddModuleToPage(Model.Item.Page.Id, "Install")%>/' + moduleId, null, function (data) {

                        var options = {
                            success: function () {
                                $('#successModuleInstallationNotification').hide('slow');
                                $('#successModuleInstallationNotification').show('fast');
                            },
                            error: function (request, textStatus, errorThrown) {
                                $('#errorModuleInstallationNotification').hide('slow');
                                $('#errorModuleInstallationNotification').show('fast');
                            },
                            url: data
                        };

                        $('#installModuleForm').ajaxSubmit(options);


                    }, "text");
                }
            }
        });

        var redirectBack = false;
        function Save(redirect) {
            redirectBack = redirect;
            var result = "[";
            $('.content-markup-pane').each
            (
                function (groupWrapperIndex) {
                    var markupId = $(this).find('input')[0].id;
                    $(this).find('.control-markup').each
                    (
                        function (groupItemIndex) {
                            var id = $(this).attr('id');
                            result += "{\"MarkupId\":\"" + markupId + "\",\"CtrId\":\"" + id.substr(3, id.length - 1) + "\",\"OrderNumber\":\"" + groupItemIndex + "\"},";
                        }
                    );
                }
            );
            if (result[result.length - 1] == ',') {
                result = result.substr(0, result.length - 1);
            }
            result += "]";

            $.ajax({
                type: "POST",
                url: "<%=Url.SavePageContents(Model.Item.Page.Id)%>",
                dataType: "json",
                data: result,
                success: function(data) {
                    $('.notification').hide('fast');
                    if (redirectBack) {
                        window.location.replace('<%= Url.Pages() %>');
                    }
                    else {
                        $("#successNotification").show("fast");
                    }
                },
                error: function(request, textStatus, errorThrown) {
                    $('.notification').hide('fast');
                    $("#errorNotification").show("fast");
                }
            });
        }

    </script>
    
    <%if (Model.Item.Mode == "Design")
      { %>
	<script type="text/javascript">
	    $(function () {
	        $("div.content-markup-pane").sortable({
	            connectWith: 'div'
	        });
	    });



	    function AddItem() {
	        $('#sort1').append('<div id="shop10" class="groupItem"><div class="itemHeader">Shopping<a href="#" class="closeEl">[-]</a></div><div class="itemContent"><ul><li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li></ul></div></div>').SortableAddItem($('#shop10'));
	    }

    </script>
    <%} %>
    


</asp:Content>
